<template>
  <div class="homeCardTabs">
      <span @click="handlerClick(index,item)" :class="[{active:select==index}]" v-for="(item,index) in list" :key="index">{{item.title}}{{item.num?'('+item.num+')':''}} </span>
  </div>
</template>

<script>
export default {
  name: "homeCardTabs",
  methods:{
    handlerClick(index,item){
      this.select = index
      this.$emit('handlerClick',item)
    },
  },
  props:{
    list:{
      default:()=>[]
    }
  },
  data(){
    return {
      select:0,
    }
  },
}
</script>

<style scoped lang="less">
.homeCardTabs{
  display: flex;
  span{
    display: inline-block;
    margin-right: 2rem;
    border-bottom: 2px solid transparent;
    line-height: 4.4rem;
    font-size: 2.1rem;
    height: 4rem;
    color: #1E2B7B;
    cursor: pointer;
    transition: all 0.3s;
  }
  .active{
    border-bottom: 0.2rem solid #3772FF;
    color:  #3772FF;
  }
}
</style>